<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '意见反馈',
  },
}
</route>

<script lang="ts" setup>
const typeList = ref([
  {
    name: '酒店用餐',
    icon: 'bags',
  },
  {
    name: '用车',
    icon: 'bags',
  },
  {
    name: '景区用餐',
    icon: 'bags',
  },
  {
    name: '退款',
    icon: 'bags',
  },
  {
    name: '其他',
    icon: 'edit-outline',
  },
])

// 当前选中项的索引
const selectedIndex = ref('酒店用餐')

// 点击事件处理函数
function handleSelectType(name: string) {
  selectedIndex.value = name
}

const content = ref<string>('')
const phoneNumber = ref<string>('')

function submitFeedback() {
  if (!selectedIndex.value) {
    uni.showToast({
      title: '请选择反馈类型',
      icon: 'none',
    })
    return
  }
  if (!content.value) {
    uni.showToast({
      title: '请输入反馈意见',
      icon: 'none',
    })
    return
  }
  uni.showToast({
    title: '提交成功',
    icon: 'none',
  })
  setTimeout(() => { // 延迟跳转
    uni.switchTab({
      url: '/pages/mine/index',
    })
  }, 500)
}
</script>

<template>
  <view class="box-border min-h-[100vh] overflow-hidden bg-[#f4f4f4]">
    <view class="mt-3">
      <wd-card>
        <view class="py-3 text-36rpx text-black">
          反馈类型
        </view>
        <view class="flex flex-wrap justify-between gap-2">
          <view
            v-for="(item, index) in typeList"
            :key="index"
            class="w-16 flex flex-col items-center justify-center rounded-lg py-2"
            :class="{
              'bg-[#e6dbd2]': item.name === selectedIndex,
              'bg-[#f3f2f1]': item.name !== selectedIndex,
            }"
            @click="handleSelectType(item.name)"
          >
            <view class="h-7 w-7 flex items-center justify-center rounded-3xl bg-#c3ac98">
              <wd-icon
                :name="item.icon"
                color="white"
                size="36rpx"
              />
            </view>
            <text class="mt-0.5 text-26rpx text-black">
              {{ item.name }}
            </text>
          </view>
        </view>
        <view class="h-3" />
      </wd-card>
    </view>
    <view class="mt-5">
      <wd-card>
        <view class="py-3 text-36rpx text-black">
          <text class="text-red">
            *
          </text>反馈意见
        </view>
        <wd-textarea v-model="content" :maxlength="300" show-word-limit placeholder="请详细说明，以便于我们解决问题，您最多可填写300字。" />
      </wd-card>
    </view>
    <view class="mt-5">
      <wd-card>
        <view class="py-3 text-36rpx text-black">
          联系电话
        </view>
        <wd-textarea v-model="phoneNumber" auto-height :maxlength="11" placeholder="请输入您的手机号，以便于我们联系您。" />
      </wd-card>
    </view>
    <view
      class="m-3 h-10 flex items-center justify-center rounded-lg bg-[linear-gradient(to_right,#e0cebd,#bfa189)] text-white"
      @click="submitFeedback"
    >
      提交
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
